<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="/html/js/axios.min.js"></script>
    <script src="/html/js/ajax.js"></script>
    <script src="/html/js/layui.js"></script>
    <script src="/html/js/util.js"></script>
    <link rel="stylesheet" href="/html/js/css/layui.css" media="all">
    <title>首页</title>
</head>

<script>
    window.onload = async function () {
        let result = await ajaxPost("/user/getUserSession");
        if (result != "no") {
            $("tips").innerHTML = "你好," + result.username;
        } else {
            $("tips").innerHTML = "请先进行" + `<a href='/html/login.html'>登录</a>`;
        }

        await findProductByPage(1);
    }

    async function addToShopCar(productId) {
        let param = {
            productId: productId
        }
        let info = await ajaxGet("/shopCar/buy", param);
        if (info == "ok") {
            location.href = "/html/custom/shop.html";
        }
    }

    //分页查询商品信息
    async function findProductByPage(pageNo) {
        let startDate = $("startDate").value;
        let endDate = $("endDate").value;
        let productName = $("productName").value;
        let params = {
            startDate: startDate,
            endDate: endDate,
            pageNo: pageNo,
            productName: productName
        }
        let result = await ajaxGet("/product/findByPage", params)
        let list = result.list;
        let str = "<div style='display: flex;justify-content: space-around'>";
        for (let i = 0; i < list.length; i++) {
            let p = list[i];
            str += "<div>";
            str += `<div style="margin: 20px">产品名：${p.productName}</div>`;
            str += `<img style="height: 400px" src='/html/imgs/${p.productImg}'>`;
            str += `<div style="margin: 20px">产品价格：${p.productPrice}</div>`;
            str += `<div style="margin: 20px">已售出：${p.soldNum} 件</div>`;
            // str += `<div style="margin: 20px">产地：${p.productLocation}</div>`;
            // str += `<div style="margin: 20px">生产日期：${p.productDate}</div>`;
            str += `<button type="button" class="layui-btn" onclick="addToShopCar(${p.productId})">添加至购物车</button>`;
            str += `<button type="button" class="layui-btn"><a href="/html/findProduct.html?productId=${p.productId}">查看详情</a></button>`;
            str += "</div>";
        }
        str += "</div>";

        $("productContent").innerHTML = str;

        let cutStr = "<div style='display: flex;justify-content: center'>";

        for (let i = 1; i <= result.pages; i++) {
            cutStr += `<a style="margin: 10px" href="javascript:findProductByPage(${i})">${i}</a>`
        }
        cutStr += "</div>";
        $("cutPageDiv").innerHTML = cutStr;
    }
</script>


<body style="padding-top: 50px;text-align: center">
<div style="padding:0 30px;display: flex;justify-content: center;margin-bottom: 50px">
    <div class="layui-form-mid layui-word-aux" id="tips"></div>

    <label class="layui-form-label">商品名</label>
    <input type="text" id="productName" required lay-verify="required"
           autocomplete="off"
           class="layui-input" style="width: 200px">
    <br>
    <label class="layui-form-label">起始日期</label>
    <input type="date" id="startDate" required lay-verify="required"
           autocomplete="off"
           class="layui-input" style="width: 200px">
    <br>
    <label class="layui-form-label">结束日期</label>
    <input type="date" id="endDate" required lay-verify="required"
           autocomplete="off"
           class="layui-input" style="width: 200px">
    <br>
    <button type="button" class="layui-btn" onclick="findProductByPage(1)">查询</button>
    <button type="button" class="layui-btn"><a href="/html/custom/shop.html">查看购物车</a></button>
    <button type="button" class="layui-btn"><a href="/html/custom/showOrder.html">我的订单详情</a></button>
</div>

<div id="productContent">

</div>

<!--页码显示-->
<div id="cutPageDiv">

</div>

</body>
</html>